<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Factorial and guessing</title>
		<style>
			#outframe{
			
				position: absolute;
				left: 10%;
				right: 10%;
				height: 350px;
				top: 100px;		
			}
			.innerframe{
				
				width: 100%;
				height: 30%;
				margin-bottom: 30px;
				margin-top: 30px;
				position: relative;
			}
			.myinput{
				height: 60%;
				top: 20%;
				width: 50%;
				position: absolute;
				font-size: 40px;
				border-radius: 10px;
			}
			.mybtn{
				background-color: aquamarine;
				position: absolute;
				top: 20%;
				left: 52%;
				width:18%;
				height: 60%;
				font-size: 40px;
				border: 2px solid #333;
				border-radius: 10px;
				text-align: center;
				line-height: 40px;
				box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
				transition: .15s;
			}
			.mybtn:active{
				transform: scale(0.80);
			}
			.myspan{
				position: absolute;
				right: 5%;
				top: 20%;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<div id="outframe">
			<div class="innerframe">
				<input id="finput" class="myinput"/>
				<button  class="mybtn" onclick="fclick()">阶乘</button>
				<span id="fspan" class="myspan"></span>
			</div>
			<div class="innerframe">
				<input id="ginput" class="myinput"/>
				<button  class="mybtn" onclick="gclick()" >猜数</button>
				<span id="gspan" class="myspan"></span>
			</div>
		</div>
		
		<script>
			var guessNum=parseInt(Math.random()*100+1)
		
			function isInt(value){
				if(!isNaN(parseFloat(value)) && isFinite(value)){
					if(value>=0 && value%1==0){
						return true;
					}else{
						alert("请输入正整数");
						return false;
					}
					
				}else{
					alert("不要输入其他字符")
					return false;
				}
			}
			function fclick(){
				var x=document.getElementById("finput").value;
				var fspan=document.getElementById("fspan");
				if(x==0){
					fspan.innerText="= 0";
					return;
				}
				var n=1;
				if(isInt(x)){
					for(i=1;i<=x;i++){
						n=n*i;
					}
					
				}
				fspan.innerText="= "+n;
			}
			function gclick(){
				var x=document.getElementById("ginput").value;
				var gspan=document.getElementById("gspan");
				if(!isInt(x)){
					return ;
				}
				if(x<guessNum){
					gspan.innerText="小了";
				}else if(x>guessNum){
					gspan.innerText="大了";
				}else{
					gspan.innerText="正确";
				}
			}
			
			
		</script>
	</body>
</html>